<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { getHotProduct } from '~/api/rank.js'
import { IHotProduct } from '~/types/api.js'

const data: IHotProduct[] = reactive((await getHotProduct()).data)

const colorMap = {
  1: '#ffc132',
  2: '#8da3b7',
  3: '#f49855',
  4: '#df5d5d'
}

let maxData = $ref(8)

// 展示的数据列表
const realData = computed(() => {
  if (data) {
    // 进行深拷贝
    let list = [...data]
    return list.splice(0, maxData)
  }
})

// 查看更多的按钮
const onMoreClick = function () {
  if (maxData >= data.length) {
    message.warn('没有更多的数据了')
  } else {
    maxData += 8
    message.success('加载成功，往下滚动')
  }
}
</script>

<template>
  <div w-285px h-618px relative rounded-10px pt-27px z-2 h-650px bg="#f4f4f4"
    style="box-shadow: 0px 0px 10px 0px #cacaca">
    <cdn-img src="/images/svg/hot_list.svg" absolute top-0 z--1 />
    <cdn-img src="/images/hot_top.png" w-120px h-130px absolute right-2 top-8 z--1 />
    <button @click="onMoreClick" bg="#f2f2f2" text="center #555555" hover="bg-gray-100 text-gray-8"
      class="btn text-14px absolute bottom-0 cursor-pointer wfull h-12 z-20">
      查看更多
    </button>
    <span color-white text-24px font-600 pl-15px>热门排行榜</span>
    <div rounded-10px bg-white w-266px h-502px ml-10px mt-38px pb-36px overflow-scroll flex="~ col" class="hot-body">
      <div v-for="(item, index) in realData">
        <div p="t-4px l-9px r-6px" class="flex items-baseline justify-between relative z-2">
          <span text-20px italic font-700 mr-10px h-54px
            :style="{ color: index + 1 > 4 ? '#555555' : colorMap[index + 1] }">
            {{ index + 1 }}
          </span>
          <span color="#555555" :title="item.title"
            class="font-500 select-none cursor-pointer wfull truncate-2 break-all">
            {{ item.title }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
